<template>
    <div style=" position: relative;">
        <el-card style="height:83vh">
            <div style="width: 40vw; margin:auto;margin-top:100px;">
                <el-form label-width="120px" ref="ruleFormRef" label-suffix="：">
                    <el-form-item label="当前密码" required>
                        <el-input v-model="add_data.oldPass" maxlength="50" placeholder="请输入当前密码(最大长度为20位)"
                            show-word-limit type="text" />
                    </el-form-item>
                    <el-form-item label="新密码" required>
                        <el-input v-model="add_data.newPass" maxlength="50" placeholder="请输入新密码(最大长度为20位)"
                            show-word-limit type="text" />
                    </el-form-item>
                    <el-form-item label="确认密码" required>
                        <el-input v-model="add_data.newPass2" maxlength="50" placeholder="请输入确认密码(最大长度为20位)"
                            show-word-limit type="text" />
                    </el-form-item>


                </el-form>
                <el-button style="margin-left: 37vw;margin-top:10px" type="primary" @click="add_ok()">确 定</el-button>
            </div>

        </el-card>
    </div>


</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick, shallowRef } from 'vue'
import {
    updateUserPass,
} from '@/api/system_center.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'

import { MD5 } from 'crypto-js';
import loginStore from '@/store/login/index.js'
let $loginStore = loginStore()
import { useRoute, useRouter } from 'vue-router';
let $useRoute = useRoute()
let $useRouter = useRouter()
onMounted(async () => {
    let luser = JSON.parse(localStorage.getItem('luser'))
    add_data.id = luser.id

})
const add_data = reactive({
    id: '',
    oldPass: '',
    newPass: '',
    newPass2: '',
})


const add_ok = () => {
    ElMessageBox.confirm(
        '是否确认修改用户密码?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {

            if (add_data.newPass != add_data.newPass2) {
                return ElMessage({
                    message: '两次密码不一样',
                    type: 'warning',
                })
            }
            let ps = {
                id: add_data.id,
                oldPass: MD5(add_data.oldPass).toString(),
                newPass: MD5(add_data.newPass).toString(),
            }

            updateUserPass(ps).then(res => {
                if (res.resultStatus.resultCode == '0000') {
                    $loginStore.token = ''
                    $loginStore.luser = ''
                    localStorage.clear();
                    $useRouter.push({
                        path: '/login',
                        query: {
                            redirect: $useRoute.path
                        }
                    })
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {


        })
}

</script>

<style scoped lang='scss'>
.up_css {
    cursor: pointer !important;
    width: 100%;
    background: #271e1e2b;
    border-radius: 5px;
}

.del_btn_Css {
    margin-top: 10px;
}

.list_data_Css {
    width: 100%
}

.current_change_btn_css {
    margin-top: 20px
}




.map_input {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.div_bg:hover {
    background-color: darkgray;
}
</style>
<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
